<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Painter</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/canvas.js"></script>
    <script src="js/Shape.js"></script>
    <script src="js/needserver.js"></script>
</head>
<body>



<div class="container">
    <h4 class="text-blue">Painter :</h4>
    <div class="painter-container">
        <canvas height="600" id="canvas">
            Sorry, Your Browser don't support canvas of Html5.
        </canvas>
        <div id="tooltip">
            <div id="color-list">
                <div style="margin:3px;float: left;font-family: Arial, sans-serif">Color</div>
            </div>
            <div>
                <div style="margin:3px;float: left;font-family: Arial, sans-serif">Line Width</div>
                <div role="lineWidth-item" class="item text-center rect active">1</div>
                <div role="lineWidth-item" class="item text-center rect">2</div>
                <div role="lineWidth-item" class="item text-center rect">4</div>
                <div role="lineWidth-item" class="item text-center rect">10</div>
                <div role="lineWidth-item" class="item text-center rect">20</div>
                <div role="lineWidth-item" class="item text-center rect">30</div>
                <div style="clear: left;"></div>
            </div>
            <div>
                <div style="margin:3px;float: left;font-family: Arial, sans-serif">Shape Type</div>
                <div role="shapeType-item" class="item text-center" style="padding: 0 3px 0;">Pen</div>
                <div role="shapeType-item" class="item text-center active" style="padding: 0 3px 0;">Line</div>
                <div role="shapeType-item" class="item text-center" style="padding: 0 3px 0;">Circle</div>
                <!--<div role="shapeType-item" class="item text-center" style="padding: 0 3px 0;">Ellipse</div>-->
                <div style="clear: left;"></div>
            </div>
            <div>
                <div style="margin:3px;float: left;font-family: Arial, sans-serif">Operation</div>
                <div role="opType-item" class="item text-center" onclick="dragMoveHandle()" style="padding: 0 3px 0;" value="move">DragMove</div>
                <div role="opType-item" class="item text-center" onclick="dfsFillHandle(false)" style="padding: 0 3px 0;" value="dfsfill">DFSFill</div>
                <div role="opType-item" class="item text-center" onclick="dfsFillHandle(true)" style="padding: 0 3px 0;" value="dfsfill_motion">DFSFill Motion</div>
                <div role="opType-item" class="item text-center" onclick="bfsFillHandle(false)" style="padding: 0 3px 0;" value="bfsfill">BFSFill</div>
                <div role="opType-item" class="item text-center" onclick="bfsFillHandle(true)" style="padding: 0 3px 0;" value="bfsfill_motion">BFSFill Motion</div>
                <div style="clear: left;"></div>
            </div>
            <div>
                <div style="margin:3px;float: left;font-family: Arial, sans-serif">Image</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="clearImages()" title="清空">Clear</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="alphaHandle()" title="设置透明度">Set Alpha</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="imgSelectHandle()" title="选择图片下载">Selector</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="imgGrayHandle()" title="灰化">Gray</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="hgHandle()" title="高对比">High Contrast</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="cameoHandle()" title="浮雕">Cameo </div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="blackHandle()" title="黑化">black</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="blurHandle()" title="模糊">blur</div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="mosaicHandle()" title="马赛克">mosaic</div>

                <div class="item text-center" style="padding: 0 3px 0;" onclick="textHandle()" title="添加文字">Text </div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="kMenusHandle()" title="聚类算法">K-Means </div>
                <div class="item text-center" style="padding: 0 3px 0;" onclick="averHandle()" title="直方图均衡">Average </div>
                <div class="item text-center" style="padding: 0 3px 0;float: right;" title="选择图片" onclick="imageHandle()">Image Choose
                    <input id="image-file" type="file" style="display: none;">
                    <img id="img-container" src="" style="display: none;">
                </div>
                <div class="item text-center" style="padding: 0 3px 0;float: right;" title="下载图片" onclick="downloadHandle()">Download</div>
                <div style="clear: right;"></div>
            </div>
        </div>
        <div>
            <div style="margin:3px;float: left;font-family: Arial, sans-serif" title="算法来自后台">Server</div>
            <div class="item text-center" style="padding: 0 3px 0;" onclick="S.blur()" title="图像模糊">Blur </div>
            <div class="item text-center" style="padding: 0 3px 0;" onclick="S.restore()" title="图像复原">Restore </div>
            <div class="item text-center" style="padding: 0 3px 0;" onclick="S.bound()" title="边界检测">Bound </div>
            <div class="item text-center" style="padding: 0 3px 0;" onclick="S.roberts()" title="Roberts算子边界检测">Roberts </div>
            <div style="clear: left;"></div>
        </div>
    </div>
    <div id="msg-bar" class="border-shadow">
        <div>
            <p>Message:</p>
            <div id="msg-content" style="display-inside:block;overflow-y: scroll"></div>

        </div>
        <!--<div><p>Console:</p>-->
            <!--<div id="console"></div>-->
        <!--</div>-->
    </div>
    <a id="download"></a>
</div>
<script>
    function Obj(){
        this.x = 2;
    }
    Obj.prototype.say = function () {
        alert(1);
    }
    Obj.prototype.o = 10;
    var work = new Worker('js/work.js');
    work.postMessage(new Obj())
</script>
</body>
</html>